<template>
  <div class='wrap'>
    <div class='container w'>
      <h3 class="sku-name">无痕内衣聚拢收副乳防下垂文胸女薄款大胸显小超薄调整型乳胶胸罩</h3>
        <div class="price ">
          <div class="row-item">
             <div class="dt ">原价</div>
             <div class="dd">998.99</div>
          </div>
          <div class="row-item">
            <div class="dt">淘宝价</div>
            <div class="dd">99.99</div> 
          </div>
          <div class="sales">
            <div>999</div>
            <div>交易成功</div>
           </div>
      </div>
       <div class="row-item">
        <div class="dt">配送</div>
        <div class="dd">湖南长沙 <span>快递 免运费</span></div>
      </div>
       <div class=" row-item">
        <div class="dt">库存</div>
        <div class="dd">999</div>
      </div>
      <div class="more row-item">
        <div class="dt">选择颜色</div>
        <div class="dd">
          <ul>
            <li>红色</li>
            <li>白色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>蓝色</li>
            <li>黑色</li>
          </ul>
        </div>
      </div>
       <div class="more row-item">
        <div class="dt">选择尺码</div>
        <div class="dd">
          <ul>
            <li>36码</li>
            <li>37码</li>
            <li>38码</li>
            <li>39码</li>
            <li>40码</li>
            <li>41码</li>
            <li>42码</li>
          </ul>
        </div>
      </div>
      <div class="more row-item">
        <div class="dt">商家承若</div>
        <div class="dd">
          <ul>
            <li>7天无理由</li>
            <li>运费险</li>
            <li>公益宝贝</li>
            <li>正品保障</li>
          </ul>
        </div>
      </div>
      <div>
        <el-input-number v-model="num" controls-position="right" 
         @change="handleChange" :min="1" :max="99"></el-input-number>
        <el-button type="primary" plain>立即购买</el-button>
        <el-button type="warning" plain>加入购物车</el-button>
        <el-button type="info" plain>收藏商品</el-button>
      </div>
      

    </div>
   </div>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        num:0,
      };
    },
    created() {},
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }, 
  };
</script>
<style lang="scss" scoped>
.container{
  font-size:13px;
}
.row-item{
  margin:15px 0;
}
.dt{
  padding: 0 10px;
  width: 80px;
  color: #6c6c6c;
  float: left;
}
.dd{
  color:#3c3c3c;
}
h3{
  margin: 0;
  font: 700 16px Arial,"microsoft yahei";
    color: #666;
    padding-top: 10px;
    line-height: 28px;
    margin-bottom: 5px;
}
.price{
  position: relative;
  padding: 1px 0;
  background-color: #f3f3f3;
}
.sales{
  position:absolute;
  top: 30%;
  right: 0;
  transform: translate(-20%, -50%);
  text-align: center;
  color: #6c6c6c;
  div:nth-child(1){
    font-size:18px;
    font-weight: 500;
    margin-bottom: 5px;
  }
}
.more{
  ul{
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    li:hover{
      cursor:pointer;
      border:1px solid rgb(81, 120, 228);
    }
    li{
       margin: 0 5px 7px 0;
       border:1px solid rgb(215, 212, 212);
       padding:5px 7px;
    }
  }
}
.el-input-number {
    position: relative;
    display: inline-block;
    width: 120px;
    line-height: 38px;
    margin-right: 10px;
}
::v-deep.el-input-number.is-controls-right .el-input__inner {
    padding-left: 2px;
    padding-right: 50px;
}
</style>